<template>
  <el-dialog v-model="isShow" :title="props.title" :width="props.width" @close="$emit('cancel')">
    <slot></slot>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    require: true
  },
  title: {
    type: String
  },
  width: {
    type: [Number, String],
    default: 500
  }
})

const emit = defineEmits(['cancel', 'confirm'])

const handleCancel = () => {
  emit('cancel')
}

const handleConfirm = () => {
  emit('confirm')
}

const isShow = computed({
  get() {
    return props.visible
  },
  set() {
    return props.visible
  }
})
</script>

<style lang="scss" scoped>
.dialog-footer {
  margin-top: 20px;
}
</style>
